<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model的底层原理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- <input type="text" v-model="msg"> -->
        <!-- 是v-model的语法糖  将bind 和input事件进行整合 -->
        <!-- <input type="text" v-bind:value="msg" v-on:keyup="input"> -->

        <!-- :value动态绑定value值  触发input事件 -->
       <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
       <textarea  cols="30" rows="10" :value="msg" @input='msg=$event.target.value'></textarea>
       <!-- :checked动态绑定 触发change事件 -->
        <input type="checkbox" :checked='msg' @change="msg=$event.target.value">
        <input type="radio" :checked='msg' @change="msg=$event.target.value">
        <input type="radio" :checked='!msg' @change="msg=!$event.target.value">

        <!-- :value值  触发change事件 -->
        <select :value="msg" @change="msg=$event.target.value">
            <option value="0">0</option>
            <option value="1">1</option>
        </select>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"",
            },

            methods:{
              input(e){
                  console.log(e);
                  console.log(e.target.value);
                  this.msg=e.target.value;
              }
            }



        });
    </script>
</body>
</html>